
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../static/jq/jquery-3.3.1.min.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        html,
        body,
        .box-div{
            width: 100%;
            height: 100%;
            background-color: bisque;
        }
        .box-div{
            display: flex;
        }

        .header{
            width: 100%;
            height: 65px;
            background-color: white;
            display: flex;
            position: fixed;
            z-index: 4;
        }

        .header-left-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 33%;
            /* border: 1px solid red; */
            font-size: 15px;
        }

        li{
            margin-left: 20px;
            cursor: pointer;
            list-style: none;
        }

        .zhihu-img{
            width: 40px;
        }

        .header-center-div{
            /* border: 1px solid red; */
            height: 65px;
            width: 34%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .select-label{
            width: 400px;
            height: 30px;
            border: 1px solid black;
            border-radius: 20px;
            display: flex;
        }

        input{
            margin-left: 10px;
            height: 27px;
            border: none;
            outline: none;
            width: 350px;
        }

        .sousuo-img{
            width: 30px;
        }

        .header-right-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 33%;
            /* border: 1px solid red; */
            font-size: 15px;
        }

        .geren-img{
            width: 40px;
        }

        button{
            margin-left: 10px;
            width: 80px;
            height: 30px;
            border-radius: 20px;
            border: none;
            background-color: blue;
            color: white;
        }

        .content-div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 85%;
           /* margin-top: 5%;*/
        }

        .left-div{
            background-color: white;
            width: 58%;
            height: 100%;
            margin-top: 200px;
            display: block;
        }
        .right-div{
            background-color: white;
            width: 22%;
            height: 102%;
            margin-left: 20px;
            margin-top: 215px;
            overflow: auto;
            /*display: block;*/
        }

        .content-left-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 100%;
            /* border: 1px solid red; */
            font-size: 15px;
            background-color: white;
        }
        .content-left-ul>li:hover{
            cursor: pointer;
        }
        .content-right-ul{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 100%;
            /* border: 1px solid red; */
            font-size: 15px;
        }

        .content-data{
            margin-top: 20px;
            height: 100px;
            width: 100%;

        }

        .drafts{
            display: flex;
            list-style: none;
            align-items: center;
            margin-left: 120px;
            background-color: white;
            width: 80px;
            height: 30px;
            border: none;
            color: black;
        }

        .content-right-ul2{
            display: flex;
            list-style: none;
            align-items: center;
            height: 65px;
            width: 100%;
            /* border: 1px solid red; */
            font-size: 15px;
        }

        .imgs{
            width: 55px;
        }

        .content-right-ul3{
            display: flex;
            list-style: none;
            align-items: center;
            height: 45px;
            width: 100%;
            /* border: 1px solid red; */
            font-size: 15px;
        }

        .content-right-ul3-li1{
            margin-left: 10px;
        }

        .content-right-ul3-li2{
            margin-left: 30px;
        }

        .content-right-ul3-li3{
            margin-left: 30px;
        }

        .content-right-ul3-li4{
            margin-left: 35px;
        }

        .zhihu2{
            margin-top: 20px;
            width: 100%;
        }

        .right-ul-but{
            width: 100%;
            height: 60px;
            border:2px solid blue;
            border-radius: 10px;
            background-color: white;
            color: blue;
            font-size: 20px;
            margin-left: 0px;
        }

        .content-div-button1{
            margin-left: 5px;
            width: 80px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: lightblue;
            color: royalblue;
        }

        .content-div-button2{
            margin-left: 5px;
            width: 40px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: lightblue;
            color: blue;
        }

        .right-img{
            margin-top: 20px;
            margin-left: 10px;
            width: 22px;
        }

        .data-lable-button{
            margin-left: 0px;
            width: 60px;
            height: 30px;
            border-radius: 5px;
            border: none;
            background-color: white;
            color: darkgray;
            text-align: left;
            /* margin-top: -13px; */
            font-size: large;
        }

        .content-data-lable{
            margin-left: 0px;
            margin-bottom: 10px;
        }
        .wrapper {
            display: flex;
            overflow: hidden;
            /*margin-bottom: 10px;*/
            /*border: 1px solid black;*/
            margin-left: 10px;
            margin-right: 10px;
        }

        .text {
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: justify;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            position: relative;
        }

        .text::before {
            content: '';
            height: calc(100% - 24px);
            float: right;
            margin-left: 10px;
            margin-right: 10px;
        }

        .text::after {
            content: '';
            width: 999vw;
            height: 999vw;
            position: absolute;
            margin-left: -100px;
        }

        .btn {
            float: right;
            clear: both;
            margin-left: 10px;
            font-size: 16px;
            padding: 0 8px;
            background: #3F51B5;
            line-height: 24px;
            border-radius: 4px;
            color: #fff;
            cursor:  pointer;
            /* margin-top: -30px; */
        }

        .btn::before {
            content: '展开'
        }

        .exp {
            display: none;
        }

        .exp:checked+.text {
            -webkit-line-clamp: 999;
        }

        .exp:checked+.text::after {
            visibility: hidden;
        }

        .exp:checked+.text .btn::before {
            content: '收起'
        }

        .ajax-div{
            background-color: white;
        }
        /*私信sty*/
        .sixin-div{
            position: absolute;
            width: 300px;
            height: 400px;
            background-color:aliceblue ;
            right: 230px;
            top: 50px;
            display: none;

        }
        .sixin-top-div{
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-top: 20px; */
            height: 40px;
        }
        .sixin-content-div{
            height: 310px;
        }
        .sixin-xia-label{
            width: 100%;
            height: 45px;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .avatar{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            margin-top: 5px;
        }
        .avatar1{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            margin-top: 5px;
        }
        .sixin-jiemian-fu-div{
            position: absolute;
            margin-left: 430px;
            margin-top: 100px;
            width: 800px;
            height: 500px;
            display: none;
        }
        .sixin-jiemian-div{
            width: 800px;
            height: 500px;
            background-color: aliceblue;
            display: flex;
            align-items: center;

        }
        .sixin-jiemian-left-div{
            width: 200px;
            height: 500px;
            display: block;
            /* 	border: 1px solid red; */
        }

        .sixin-jiemian-left-shousuo-div{
            width: 200px;
            height: 40px;
            /* margin-top: 10px; */

        }
        .sixin-jiemian-left-shousuo-label{
            width: 200px;
            height: 40px;
            display: flex;
        }
        .sixin-jiemian-left-text{
            width: 200px;
            height: 100%;
            border-radius: 20px;

            /* border: 1px solid red; */
        }
        .sixin-jiemian-left-sousuo-img{
            width: 20px;
            height: 30px;
        }
        .sixin-jiemian-left-avatar-div{
            width: 100px;
            height: 400px;
        }
        .sixin-jiemian-left-guanzhu-div{
            height: 40px;
            display: flex;
            align-items: center;
        }
        .sixin-jiemian-left-avatar{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            margin-top: 5px;
        }

        .sixin-jiemian-right-div{
            width: 600px;
            height: 500px;
        }
        .sixin-jiemian-title-div{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 0px;

        }
        .sixin-jiemian-content-div{
            height:280px;
            width: 100%;
        }

        .sixin-jiemian-liaotian-div{
            width: 100%;
            height:180px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }
        .sixin-jiemian-liaotian-text{
            height:100%;
            width: 100%;
        }
        .img-shangchu{
            width: 20px;
            background-color: black;
            margin-right: 5px;
        }
        .sixin-jiemian-title-kong-div{
            width: 20px;
        }
        .geren-div{
            height: 180px;
            width: 140px;
            position: absolute;
            top: 8.7%;
            left: 72%;
            /* border:3px solid red; */
            background-color: white;
        }
        .dv-img{
            width: 18px;
        }
        .geren-div{
            background-size: 20px;
            display: none;
        }
        .geren-ul{
            list-style:none;
        }
        .geren-div a{
            text-decoration: none;
            color: black;
            height: 50px;
            align-items: center;
        }


        /* 消息 */
        .img-xiaoxi{
            width: 20px;
            height: 20px;
            margin-left: 5px;
            display: flex;
        }
        .content-xiaoxi-div{
            width: 400px;
            height: 500px;
            background-color: white;
            margin-left: -468px;
            margin-top: 70px;
            overflow: scroll;
        }

        .content-xiaoxi-ul{
            display: flex;
            justify-content:flex-start;
        }

        .x-Menubar-img1{
            width: 45px;
            height: 45px;
            margin: 10px;
        }

        .x-g1-img{
            width: 5px;
            height: 41px;
            margin: 10px;
        }

        .x-yonghu-img{
            width: 30px;
            height: 30px;
            margin-left: 15px;
            margin-top: 15px;
        }

        .x-aixinimg{
            width: 30px;
            height: 30px;
            margin: 25px;
            margin-top: 16px;
        }

        .content-xiaoxi-allmessages a{
            text-decoration: none;
            color: slategray;
        }

        .content-xiaoxi-allmessages{
            margin-top: 360px;
        }

        .img-sezhi{
            width: 20px;
            height: 20px;
        }

        .content-xiaoxi-guanzhu{
            color: slategray;
            margin-left: 110px;
        }

        .content-xiaoxi-follow hr{
            margin-top: 20px;
        }

        .content-xiaoxi-follow p{
            margin-top: 20px
        }

        .content-xiaoxi-follow div:hover{
            background-color: #f4f6f9;
        }


        .Suggested-Follows-box{
            width: 100%;
            height: 400px;
        }
        .Suggested-Follows-box-div1{
            height: 10%;
            text-align: center;
        }
        .Suggested-Follows-box-div2{
            height: 80%;
        }
        .Suggested-Follows-box-div3{
            height: 10%;
        }
        .popup {
            position: fixed; /* 或者 absolute */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40%;
            height: 60%;
            overflow: auto;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            overflow: auto;
        }
        .bj-div{
            position: fixed;
            width: 100%;
            height: 100%;
            opacity: 0.2;
            background-color: #000000;
            display: none;
        }
        .div-pl{
            display: flex;
            display: none;
        }
        .div-pl>img{
            position: fixed;
            width: 30px;
            height: 30px;
            background-color: red;
            top: 13%;
            left: 71.5%;
        }
        .below>div>div>img{
            width: 40px;
        }
        .below>div{
            display: flex;
        }
        .below-below{
            display: flex;
            justify-content: space-between;
            width: 600px;
        }
        .below-below>div>img{
            width: 16px;
        }
        .below-or{
            margin-left: 30px;
        }
        .below-or>div>div>img{
            width: 40px;
        }
        .below-or>div{
            display: flex;
        }
        .below-below-or{
            display: flex;
            justify-content: space-between;
            width: 570px;
        }
        .below-below-or>div>img{
            width: 16px;
        }
    </style>
</head>
<body>
<div class="box-div">
    <div class="header">
        <ul class="header-left-ul">
            <li><img src="/demo05/img/zhihu.png" alt="" class="zhihu-img"></li>
            <li>首页</li>
            <li>知乎学堂</li>
            <li>发现</li>
            <li>等你来答</li>
        </ul>

        <div class="header-center-div">
            <label class="select-label">
                <input type="text" name="" id="selectAll" placeholder="请搜索">
                <img src="/demo05/img/搜索.png" alt="" class="sousuo-img" id="select">
            </label>
            <button>提问</button>
        </div>
        <ul class="header-right-ul" id="header-right-ul">
            <li class="btn-li-xiaoxi"><img class="img-xiaoxi" src="/demo05/img/x-xiaoxi.png">消息</li>
            <li>私信</li>
            <li><img src="/demo05/img/头像.png"  class="geren-img"></li>
        </ul>
    </div>
<%--        点私信界面--%>
    <div class="sixin-div" id="sixin-div">

        <div class="sixin-top-div">
            我的私信
        </div>
        <hr>
        <div class="sixin-content-div">
<%--            <div class="avatar" ></div>--%>
<%--            <div class="avatar" ></div>--%>
<%--            <div class="avatar" ></div>--%>

        </div>
        <hr>
        <div>
            <ul class="sixin-xia-label">
                <li>写新私信</li>
                <li>查看全部私信</li>
            </ul>
        </div>
    </div>

    <!-- 点消息的界面 -->
    <%--  私信点头像界面  --%>
    <div class="sixin-jiemian-fu-div" id="sixin-jiemian-fu-div">

        <div class="sixin-jiemian-div" id="sixin-jiemian-div">

            <div class="sixin-jiemian-left-div">
                <div class="sixin-jiemian-left-shousuo-div">
                    <label class="sixin-jiemian-left-shousuo-label">
                        <input type="text" placeholder="请搜索联系人" class="sixin-jiemian-left-text"/>
                        <img  src="/demo05/img/搜索.png" class="sixin-jiemian-left-sousuo-img"/>
                    </label>
                </div>
                <hr />
                <div class="sixin-jiemian-left-avatar-div">
                    <div class="sixin-jiemian-left-avatar" ></div>
                    <hr />
                    <div class="sixin-jiemian-left-avatar" ></div>
                    <hr />
                    <div class="sixin-jiemian-left-avatar" ></div>
                    <hr />
                </div>
                <hr />
                <div  class="sixin-jiemian-left-guanzhu-div">
                    <p>互相关注</p>
                </div>
            </div>

            <div class="sixin-jiemian-right-div">
                <div class="sixin-jiemian-title-div">
                    <div class="sixin-jiemian-title-kong-div"></div>
                    用户名
                    <img src="/demo05/img/删除.png" alt="" class="img-shangchu">
                </div>

                <hr>
                <div class="sixin-jiemian-content-div">

                </div>
                <hr>
                <div class="sixin-jiemian-liaotian-div" id="sixin-jiemian-liaotian-div">
                    <input type="text" class="sixin-jiemian-liaotian-text" placeholder="Type your message here"/>
                    <button type="button" id="send-button">发送</button>
                </div>
            </div>
        </div>
    </div>

    <div class="content-div">
        <div class="left-div">
            <ul class="content-left-ul">
                <li  id="recommend">推荐</li>
                <li id="follow">关注</li>
                <li>热点</li>
                <li>视频</li>
            </ul>
            <hr>
            <div class="data-div" style="width: 100%;height: 100%;overflow-y: auto">
                <div class="data">
                    <div class="content-data">
                        <div class="content-data-text">

                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="right-div">
            <div class="content-right-div">
                <ul class="content-right-ul">
                    <li><img src="/demo05/img/创作中心.png" alt="" class="cZ-img"></li>
                    <li>创作中心</li>
                    <li class="drafts"><a href="#">草稿箱(0)</a></li>
                </ul>
            </div>
            <div>
                <ul class="content-right-ul2">
                    <li><img src="/demo05/img/回答问题.png" alt="" class="imgs"></li>
                    <li><img src="/demo05/img/发视频.png" alt="" class="imgs"></li>
                    <li><img src="/demo05/img/写文章.png" alt="" class="imgs"></li>
                    <li><img src="/demo05/img/写想法.png" alt="" class="imgs"></li>
                </ul>
                <ul class="content-right-ul3">
                    <li class="content-right-ul3-li1">回答问题</li>
                    <li class="content-right-ul3-li2">发视频</li>
                    <li class="content-right-ul3-li3">写文章</li>
                    <li class="content-right-ul3-li4">写想法</li>
                </ul>

            </div>
            <div>
                <img src="/demo05/img/知乎2.png" class="zhihu2">
            </div>
            <button class="right-ul-but">+开始创作</button>
            <div class="Suggested-Follows-box">
                <div class="Suggested-Follows-box-div1">推荐关注</div>
                <div class="Suggested-Follows-box-div2"></div>
                <div class="Suggested-Follows-box-div3"></div>
            </div>
        </div>
        <%--    geren--%>
        <%--    geren--%>
        <div class="geren-div" id="geren-div">
            <ul class="geren-ul">
                <li>
                    <img src="/demo05/img/geren-img/用户.png" alt="" class="dv-img"/>
                    <a href="#" onclick="window.location.href='toqian?ac=personal'">我的主页</a>
                </li>
                <li>
                    <img src="/demo05/img/geren-img/喜爱.png" alt="" class="dv-img"/>
                    <a href="#">无障碍</a>
                </li>
                <li>
                    <img src="/demo05/img/geren-img/空巢老人.png" alt="" class="dv-img"/>
                    <a href="#">关怀版</a>
                </li>
                <li>
                    <img src="/demo05/img/geren-img/设置.png" alt="" class="dv-img"/>
                    <a href="#">设置</a>
                </li>
                <li>
                    <img src="/demo05/img/geren-img/退出.png" alt="" class="dv-img"/>
                    <a href="#" onclick="window.location.href='http://localhost:8080/demo05/qian/user?ac=logout'">退出</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 点消息的界面 -->
    <!-- 消息 -->
    <div class="content-xiaoxi-div">
        <div>
            <ul class="content-xiaoxi-ul">
                <li><img class="x-Menubar-img1" src="/demo05/img/x-菜单栏1.png"/></li>
                <li><img class="x-g1-img" src="/demo05/img/g1.png"/></li>
                <li><img class="x-yonghu-img" src="/demo05/img/x-用户1.png"/></li>
                <li><img class="x-g1-img" src="/demo05/img/g1.png"/></li>
                <li><img class="x-aixinimg" src="/demo05/img/x-aixin1.png"/></li>
            </ul>
            <hr>
        </div>
        <div class="content-xiaoxi-data">
        </div>

        <div class="content-xiaoxi-follow">
            <p class="content-xiaoxi-guanzhu">这些人最近关注了你</p>
            <hr>
        </div>

        <div class="content-xiaoxi-aixin">

        </div>

        <div class="content-xiaoxi-allmessages">
            <img class="img-sezhi" src="/demo05/img/sezhi-z.png" />
            <a href="#">设置</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">查看全部消息</a>
        </div>
    </div>
    <%--  私信点头像界面  --%>
    <div class="sixin-jiemian-fu-div" id="sixin-jiemian-fu-div">

        <div class="sixin-jiemian-div" id="sixin-jiemian-div">

            <div class="sixin-jiemian-left-div">
                <div class="sixin-jiemian-left-shousuo-div">
                    <label class="sixin-jiemian-left-shousuo-label">
                        <input type="text" placeholder="请搜索联系人" class="sixin-jiemian-left-text"/>
                        <img  src="/demo05/img/搜索.png" class="sixin-jiemian-left-sousuo-img"/>
                    </label>
                </div>
                <hr />
                <div class="sixin-jiemian-left-avatar-div">
                    <%--                    <div class="sixin-jiemian-left-avatar" ></div>--%>
                    <%--                    <hr />--%>
                    <%--                    <div class="sixin-jiemian-left-avatar" ></div>--%>
                    <%--                    <hr />--%>
                    <%--                    <div class="sixin-jiemian-left-avatar" ></div>--%>
                    <%--                    <hr />--%>
                </div>
                <hr />
                <div  class="sixin-jiemian-left-guanzhu-div">
                    <p>互相关注</p>
                </div>
            </div>

            <div class="sixin-jiemian-right-div">
                <div class="sixin-jiemian-title-div">
                    <div class="sixin-jiemian-title-kong-div"></div>
                    用户名
                    <img src="/demo05/img/删除.png" alt="" class="img-shangchu">
                </div>

                <hr>
                <div class="sixin-jiemian-content-div">

                </div>
                <hr>
                <div class="sixin-jiemian-liaotian-div" id="sixin-jiemian-liaotian-div">
                    <input type="text" class="sixin-jiemian-liaotian-text" placeholder="Type your message here"/>
                    <button type="button" id="send-button">发送</button>
                </div>
            </div>
        </div>
    </div>

        <div class="bj-div"></div>
        <div class="div-pl">
            <div class="popup">

            </div>
            <img src="/demo05/img/cha.png" class="cha"/>
        </div>
</div>
</div>
</body>
<script>
    let userId =0;

    $(function(){
        init();

        //消息
        $.ajax({
            async: true, <%-- 异步提交，默认true --%>
            url: 'http://localhost:8080/demo05/card?ac=listAllCard',
            type: "get",
            dataType: "json", <%--响应内容的类型--%>
            success: function (pb) {
                pb.data.forEach(function (item, index) {
                    console.log(item);
                    console.log(item.img);
                    let divdata = $("<div id='divdata' style='font-size:15px;color: black;display: flex;align-items: center; margin-left: 10px;'></div>");
                    //用户
                    let username = $("<a href='#' onclick= window.location.href='toqian?ac=PersonalHomepage' style='text-decoration:none;color: #6A5ACD;'></a>").css("font-size","15px;");
                    $(username).text(item.user_name);

                    let op = $("<label>邀请你回答问题</label>").css("font-size","18px");

                    let title = $("<a href='#' style='text-decoration:none;color: #6A5ACD;'></a>").css("font-size","15px;");
                    $(title).text(item.title);

                    $(divdata).append(username,op,title);

                    let hr = $("<hr>");

                    $(".content-xiaoxi-data").append(divdata,hr);

                })
            }
        });
        //-------------------

        //点击消息
        $(".content-xiaoxi-div").css("display","none");

        $(".btn-li-xiaoxi").on('click',function(){
            if($(".content-xiaoxi-div").css("display") == "none"){
                $(".content-xiaoxi-div").css("display","block")
            }else if($(".content-xiaoxi-div").css("display") == "block"){
                $(".content-xiaoxi-div").css("display","none")
            }
        });

        $(".content-xiaoxi-follow").css("display","none");
        $(".content-xiaoxi-aixin").css("display","none");

        $(".x-Menubar-img1").on('click',function(){
            $(".content-xiaoxi-follow").css("display","none");
            $(".content-xiaoxi-aixin").css("display","none");
            $(".content-xiaoxi-data").css("display","block");
        });

        $(".x-yonghu-img").on('click',function(){
            $(".content-xiaoxi-data").css("display","none");
            $(".content-xiaoxi-aixin").css("display","none");
            $(".content-xiaoxi-follow").css("display","block");
        });

        $(".x-aixinimg").on('click',function(){
            $(".content-xiaoxi-data").css("display","none");
            $(".content-xiaoxi-follow").css("display","none");
            $(".content-xiaoxi-aixin").css("display","block");
        });
        //---------------

        //用户关注
        $.ajax({
            async: true, <%-- 异步提交，默认true --%>
            url: 'http://localhost:8080/demo05/card?ac=selectAllASAP',
            type: "get",
            dataType: "json", <%--响应内容的类型--%>
            success: function (pb) {
                let hr = $("<hr>");
                console.log(pb);
                pb.data.forEach(function (item, index) {
                    console.log(pb.data);
                    // console.log(item.img);

                    let div = $("<div></div>")
                    let img = $("<img style='height: 60px;width: 60px' src='/demo05/img/PHtouxiang.png'/>");
                    $(img).text(img.img);

                    let username = $("<a href='#' onclick= window.location.href='toqian?ac=PersonalHomepage' style='text-decoration:none;color: black;font-size:20px;'></a>");
                    $(username).text(item.user_name);

                    $(div).append(img,username);

                    $(".content-xiaoxi-follow").append(div);

                    // $(username).on('click',function (event){
                    //     let src = event.target;
                    //
                    //     let name = $("username").val();
                    //     console.log(name);
                    //
                    // });
                });
            }
        });




        //私信的 点击事件
        $("#header-right-ul").on('click',function (event){
            let src = event.target;
            console.log(src);
            if (src.innerHTML=="私信"){
                $('.sixin-div').toggle();
                $.ajax({
                    async: true, <%-- 异步提交，默认true --%>
                    url: 'http://localhost:8080/demo05/follow?ac=selectavatar',
                    type: "post",
                    dataType: "json", <%--响应内容的类型--%>
                    success: function (pb) {
                        if (pb.status==200){
                            $('.sixin-content-div').empty();
                            // console.log(pb.data[0].user_name)
                            pb.data.forEach(function (item,index){
                                console.log(item.img);
                                // console.log(item.user_name);

                                let img = $("<img class='avatar' src="+item.img+">");
                                // let img = $("<img class='avatar' src='item.img'>");

                                let op = $("<div class='avatar-div'>");
                                op.css("display","flex");

                                let ppp = $("<div>");
                                ppp.append(img);

                                let p = $("<div>");
                                ppp.css("display","flex");
                                ppp.css("flex-direction","column")

                                p.append(item.user_name+"</br>");
                                p.append(item.content);

                                op.append(ppp,p);
                                $(".sixin-content-div").append(op);

                            })
                        }
                    }
                });
            }
        })
    $(document).keydown( function(event) {
        if($('#sixin-jiemian-fu-div').css('display')==='block'){
            if (event.key ==='Enter') {
                let message = $('.sixin-jiemian-liaotian-text').val();
                $('.sixin-jiemian-content-div').append('<div>我: ' + message + '</div>');
                $('.sixin-jiemian-liaotian-text').val('');
            }
        }
    });
    $(".img-shangchu").click(function(event){
        let src = event.target;
        console.log(src.className);
        if(src.className == "img-shangchu" && $('#sixin-jiemian-fu-div').css('display')==='block' ){
            $('#sixin-jiemian-fu-div').css('display','none');

        }
    });

    //     $("#img-shangchu2").on('click',function (event){
    //         let src = event.target;
    //         console.log("============================================================================")
    //         // if(src.className == "img-shangchu" && $('#sixin-jiemian-fu-div').css('display')==='block' ){
    //         //     $('#sixin-jiemian-fu-div').css('display','none');
    //         //
    //         // }
    //
    //         $("#sixin-jiemian-fu-div").css("display","none");
    //
    // })
        $(document).ready(function() {
            $('.sixin-content-div').click(function() {
                console.log("====================");
                if($("#sixin-jiemian-div").css("display") == "none"){
                    console.log("++++++++++++++++++++++")
                    $("#sixin-jiemian-div").css("display","flex");
                }
                // console.log(12334);
                $('.sixin-jiemian-fu-div').toggle();
                $('#sixin-div').css('display','none');
                $('.sixin-jiemian-left-avatar-div').empty();
                $.ajax({
                    async: true, <%-- 异步提交，默认true --%>
                    url: 'http://localhost:8080/demo05/follow?ac=selectavatar',
                    type: "post",
                    dataType: "json", <%--响应内容的类型--%>
                    success: function (pb) {
                        if (pb.status==200){
                            $('.sixin-content-div').empty();
                            pb.data.forEach(function (item,index){
                                let img = $("<img class='avatar' src="+item.img+">");

                                let op2 = $("<div class='avatar-div'>");
                                op2.css("display","flex");

                                let ppp = $("<div>");
                                ppp.append(img);

                                let p = $("<div class='sixin-jiemian-left-avatar-1-div'>");
                                ppp.css("display","flex");
                                ppp.css("flex-direction","column")

                                let  jiemianId = 'jiemian'+item.id;
                                let jiemian =  $('<div>').addClass('sixin-jiemian-content-div').attr('id',jiemianId);
                                // $('.sixin-jiemian-right-div').append(jiemian);

                                p.append(item.user_name+"</br>");
                                p.append(item.content);

                                op2.append(ppp,p);
                                $(".sixin-jiemian-left-avatar-div").append(op2);

                            })
                            //点头像出不同的框
                            $('.avatar-div').on('click',function (event){
                                let src =event.target;
                                $('.sixin-jiemian-title-div').empty();
                                $('.sixin-jiemian-content-div').empty();
                                if (src.tagName=='IMG'||src.tagName=='DIV'){
                                    let src1=src.innerHTML.substr(0,src.innerHTML.lastIndexOf("<"));
                                    $('.sixin-jiemian-title-div').text(src1);
                                    let img =$("<img  src='/demo05/img/删除.png' alt='' class='img-shangchu' id='img-shangchu2'/>") ;
                                    $('.sixin-jiemian-title-div').append(img)
                                }
                                // debugger

                                let src2=src.innerHTML.substr(0,src.innerHTML.lastIndexOf("<"));
                                // console.log(src2);

                                $.ajax({
                                    async:true,
                                    url: 'http://localhost:8080/demo05/messages?ac=select1',
                                    type: "post",
                                    dataType: "json", <%--响应内容的类型--%>
                                    success:function (pb){
                                        let data = pb.data;
                                        data.forEach(function (item,index){
                                            console.log(item.user_name);
                                            if (src2==item.user_name){
                                                $('#sixin-jiemian-content-div').empty();
                                                $.ajax({
                                                    async:true,
                                                    url: 'http://localhost:8080/demo05/messages?ac=select2',
                                                    type: "post",
                                                    data:{id:item.id},
                                                    dataType: "json", <%--响应内容的类型--%>
                                                    success:function (pb){
                                                        let data = pb.data;
                                                        data.forEach(function (item,index){
                                                            let d =  $("<div>");
                                                            d.innerText=item.content;
                                                            console.log(d.innerText);
                                                            $('.sixin-jiemian-content-div').append('<div class="sixin-jiemian-content-div-div"> ' + d.innerText + ':我</div>');
                                                        })
                                                    }
                                                })
                                            }
                                        })
                                    }
                                })
                            })
                        }
                    }
                });
            });
        });

        $(".sixin-jiemian-title-div").on("click",function(event){
            let src = event.target;
            if (src.tagName == "IMG"){
                $("#sixin-jiemian-fu-div").css("display","none");
            }
        });
        $('#send-button').click(function(event) {
            let src = event.target;
            let user_name = $('.sixin-jiemian-title-div').text();
            let message = $('.sixin-jiemian-liaotian-text').val();
            console.log(user_name);

            $.ajax({
                async:true,
                url:'http://localhost:8080/demo05/messages?ac=selectId',
                type:"post",
                data:{user_name:user_name,
                        message:message
                        },
                dataType:"json",
                success:function (flag){
                  if (flag == true){
                      $('.sixin-jiemian-content-div').append('<div> ' + message + ':我</div>');
                      $('.sixin-jiemian-liaotian-text').val('');
                  }
                }
            })
        });
    });
    $('.geren-img').on('click',function(event){
        $('.geren-div').toggle();
    });

    //推荐关注
    $.ajax({
        async: true,
        url: 'http://localhost:8080/demo05/user?ac=Attention',
        type: "post",
        data:{id:sessionStorage.getItem("id")},
        dataType: "json",
        success: function (pb) {
           pb.data.forEach(function (itme,index) {
               console.log(itme.img)
               let img = $("<img src="+itme.img+" />");
               let name = $("<div>")
               name.append(img,itme.user_name)
               let ospan = $("<span>");
               let oa = $("<a href='#'>").text("关注").on("click",function (event) {
                   Attention(event,itme.id);
               });
               ospan.append("<img id='img"+itme.id+"' src='../img/加号.png'>",oa);
               let odiv = $("<div>");
               odiv.append(name,ospan)
               $(".Suggested-Follows-box-div2").append(odiv);
               $(".Suggested-Follows-box-div2>div>div>img").css("width","50px")
               $(".Suggested-Follows-box-div2>div>span>img").css("width","20px");
               $(".Suggested-Follows-box-div2>div>span>a").css("text-decoration","none");
               $(".Suggested-Follows-box-div2>div>span>a").css("color","black");
               $(".Suggested-Follows-box-div2>div").css("display","flex");
               $(".Suggested-Follows-box-div2>div").css("align-items","center");
               $(".Suggested-Follows-box-div2>div").css("width","100%");
               $(".Suggested-Follows-box-div2>div").css("justify-content","space-between");
           })
        }
    });

    function Attention(event,id) {
        let src = event.target;
        console.log()
        if(src.innerHTML == "关注"){
            $.ajax({
                async: true,
                url: 'http://localhost:8080/demo05/follow?ac=insertFol',
                type: "post",
                data: {id:sessionStorage.getItem("id"),uid:id},
                dataType: "json",
                success: function (pb) {
                    if(pb.data){
                        src.innerHTML = "已关注";
                        $("#img"+id+"").css("display","none")
                    }
                }
            });
        }else if(src.innerHTML == "取消关注"){
            $.ajax({
                async: true,
                url: 'http://localhost:8080/demo05/follow?ac=updateFol',
                type: "post",
                data: {id: sessionStorage.getItem("id"),uid:id},
                dataType: "json",
                success: function (pb) {
                    if(pb.data){
                        src.innerHTML = "关注";
                        $("#img"+id+"").css("display","inline")
                    }
                }
            });
        }
    }
    $(".Suggested-Follows-box-div2").on("mouseenter","a",function (event) {
        if(event.target.innerHTML == "已关注"){
            event.target.innerHTML = "取消关注"
        }
    })
    $(".Suggested-Follows-box-div2").on("mouseleave","a",function (event) {
        if(event.target.innerHTML == "取消关注"){
            event.target.innerHTML = "已关注"
        }
    })

    $('.sixin-jiemian-left-sousuo-img').on('click',function (event){
        let user_name = $('.sixin-jiemian-left-text').val();

        $.ajax({
            async: true, <%-- 异步提交，默认true --%>
            url: 'http://localhost:8080/demo05/messages?ac=select3',
            type: "post",
            data: {user_name:user_name},
            dataType: "json", <%--响应内容的类型--%>
            success: function (pb) {
                let data = pb.data;
                $('.avatar').css('display','none');
                $('.sixin-jiemian-left-avatar-1-div').css('display','none');
                data.forEach(function (item,index){
                    console.log(item);
                    let img = $("<img class='avatar1' src="+item.img+">");
                    // let img = $("<img class='avatar' src='item.img'>");

                    let op = $("<div class='avatar-div1'>");
                    op.css("display","flex");

                    let ppp = $("<div>");
                    ppp.append(img);

                    let p = $("<div>");
                    ppp.css("display","flex");
                    ppp.css("flex-direction","column")


                    p.append(item.user_name+"</br>");
                    p.append(item.content);

                    op.append(ppp,p);
                    op.css('width','100%')
                    $(".sixin-jiemian-left-avatar-div").append(op);

                })
            }
        })
    })
    //根据关注查询
    $("#follow").on("click",function (){
        console.log("==========");
            close();
        $.ajax({
            async:true,
            url:'http://localhost:8080/demo05/card?ac=selectFollow',
            type:"post",
            data:{
              limit:7,
            },
            dataType:"json",
            success:function (pb){
                let ocontentDataText = $(".content-data-text");
                pb.data.forEach(function (item,index){
                    console.log(item);
                    let aaa = `
                <div class = "ajax-div" id="ajax-div${item.id}">
                 <div class="wrapper">
                        <input id="exp${item.id}" class="exp" type="checkbox">
                        <div class="text">
                            <label class="btn" for="exp${item.id}"></label>
                            <h3>${item.title}</h3>
                            <span>${item.card_content}</span>
                        </div>
                    </div>
                    <div class="content-data-div">
                        <div>
                            <button class="content-div-button1" id="data-div-button"><div class="angle">&#9650 赞同</div></button>
                            <button class="content-div-button2" id="data-div-button2"><div class="angle">&#9660 </div></button>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/评论.png" alt="" class="right-img">
                                <button class="data-lable-button" onclick="comment(${item.id})">条评论</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/分享.png" alt="" class="right-img">
                                <button class="data-lable-button">分享</button>
                            </label>

                             <label for="" class="content-data-lable" id="collect">
                                <img src="/demo05/img/收藏.png" alt="" class="right-img" onClick="content(this)">
                                <button class="data-lable-button">收藏</button>
                            </label>

                             <label for="" class="content-data-lable" id="">
                                <img src="/demo05/img/喜欢.png" alt="" class="right-img" onClick = "like(this)">
                                <button class="data-lable-button">喜欢</button>
                            </label>
                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/更多.png" alt="" class="right-img">
                                <button class="data-lable-button"></button>
                            </label>
                        </div>

                    </div>
                </div>

                `
                    let odiv = $(".data>div>div>div")[index]
                    // $(odiv).children("h3").text(item.title);

                    // $(odiv).children("span").text(item.content);
                    ocontentDataText.append(aaa);
                });
            }
        });
    });

    function close() {
        $(".content-data-text").html("");
    }

    //评论
    function comment(id) {
        let fwbk = " <div id=editor"+id+" class=editor width=200px> </div>";

        $("#ajax-div"+id).append(fwbk)
        let toolbarOptions = [
            [ 'image']
        ];
        let quill = new Quill('#editor'+id, {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });
        $.ajax({
            async:true,
            url:'http://localhost:8080/demo05/comment?ac=selectCom',
            data:{id:id},
            type:"post",
            dataType:"json",
            success:function (pb){

                pb.data.forEach(function (itme,index) {
                    let src = "";
                    let idd = itme.id;
                    console.log(sessionStorage.getItem("id"));
                    $.ajax({
                        async:false,
                        url:'http://localhost:8080/demo05/comment?ac=selectComXh',
                        data:{"uid":sessionStorage.getItem("id"),"cid":idd},
                        type:"post",
                        dataType:"json",
                        success:function (pb){
                            console.log(pb.data)
                            if(pb.data){
                                src = "../img/喜欢红.png";
                            }else{
                                src = "/demo05/img/geren-img/喜爱.png";
                            }
                            let odiv = `<div class="below">
                            <div>
                                <div><img src="${itme.img}"/></div>
                                <div>
                                    <div><label>${itme.user_name}</label></div>
                                    <div><label>${itme.comment_content}</label></div>
                                    <div class="below-below">
                                        <div><label>${itme.create_time}</label></div>
                                         <div>
                                         <img src="../img/回复.png"/><label>回复</label>
                                         <img src="${src}" onclick="hflike(${itme.id})"/><label>${itme.number}</label>
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                            $("#ajax-div"+id).append(odiv)
                            pl(itme.children,itme.user_name,id);
                        }
                    });
                })
            }
        });
    }

    function pl(children,name,id) {
        children.forEach(function (itme,index) {
            pl(itme.children,itme.user_name,id);
            if(index < 2){
                let src = "";
                $.ajax({
                    async: false,
                    url: 'http://localhost:8080/demo05/comment?ac=selectComXh',
                    data: {uid: sessionStorage.getItem("id"), cid: itme.id},
                    type: "post",
                    dataType: "json",
                    success: function (pb) {
                        console.log(pb.data)
                        if (pb.data) {
                            src = "../img/喜欢红.png";
                        } else {
                            src = "/demo05/img/geren-img/喜爱.png";
                        }
                        console.log(src)
                        let odiv = `<div class="below-or">
                            <div>
                                <div><img src="${itme.img}"/></div>
                                <div>
                                    <div><label>${itme.user_name}>${name}</label></div>
                                    <div><label>${itme.comment_content}</label></div>
                                    <div class="below-below-or">
                                        <div><label>${itme.create_time}</label></div>
                                         <div>
                                         <img src="../img/回复.png"/><label>回复</label>
                                         <img src="${src}" onclick="hflike(this,${itme.id})"/><label>${itme.number}</label>
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                        $("#ajax-div"+id).append(odiv);
                        if(index == 1){
                            let op = `<a href="#" onclick="" style="background-color: #8e8e8e;margin-left: 30px">查看全部</a>`;
                            $("#ajax-div"+id).append(op);
                        }
                    }
                });

            }
        })
    }

    //回复点赞
    function hflike(event,id) {
        if(event.getAttribute("src") == "/demo05/img/geren-img/喜爱.png"){
            $.ajax({
                async:true,
                url:'http://localhost:8080/demo05/comment?ac=updateCom',
                data:{uid:sessionStorage.getItem("id"),cid:id},
                type:"post",
                dataType:"json",
                success:function (pb){
                    if(pb.data){
                        event.nextElementSibling.innerHTML = event.nextElementSibling.innerHTML*1+1;
                        event.setAttribute("src","../img/喜欢红.png");
                    }
                    console.log(pb.data)
                }
            });
        }else if(event.getAttribute("src") == "../img/喜欢红.png"){
            if(event.nextElementSibling.innerHTML >0){
                $.ajax({
                    async:true,
                    url:'http://localhost:8080/demo05/comment?ac=updateCom2',
                    data:{uid:sessionStorage.getItem("id"),cid:id},
                    type:"post",
                    dataType:"json",
                    success:function (pb){
                        if(pb.data){
                            event.nextElementSibling.innerHTML = event.nextElementSibling.innerHTML*1-1;
                            event.setAttribute("src","/demo05/img/geren-img/喜爱.png");
                        }
                    }
                });
            }
        }

    }



    $(".cha").on("click",function () {
        $(".div-pl").css("display","none");
        $(".bj-div").css("display","none");
    })

    //点赞

    $(".content-div-button1").on("click",function(){
        console.log($('#data-div-button').css("background-color"),"++++++++++++++++");
        console.log($(".content-div-button1").text() == "▲ 赞同");
        if($('#data-div-button').css("background-color")=="rgb(173, 216, 230)"){
            $('#data-div-button').css("background-color","blue");
            console.log(count);
        }else {
            $('#data-div-button').css("background-color","rgb(173, 216, 230)");
            console.log(count);
        }
    });

    $(".content-div-button2").on("click",function(){
        if($('#data-div-button2').css("background-color")=="rgb(173, 216, 230)"){
            $('#data-div-button2').css("background-color","blue");
            count = count-1;
            console.log(count);
        }else {
            $('#data-div-button2').css("background-color","rgb(173, 216, 230)");
            count = count+1;
            console.log(count);
        }
    });



    function init() {
        $.ajax({
            async: true,
            url:'http://localhost:8080/demo05/qian/card?ac=selectRecommend',
            type: "post",
            data:{
                limit:7,
            },
            dataType: "json",
            success:function (pb) {
                let ocontentDataText = $(".content-data-text");
                pb.data.forEach(function (item,index){
                    console.log(item);
                    let aaa = `
                <div class = "ajax-div">
                 <div class="wrapper">
                        <input id="exp${item.id}" class="exp" type="checkbox">
                        <div class="text">
                            <label class="btn" for="exp${item.id}"></label>
                            <h3>${item.title}</h3>
                            <span>${item.card_content}</span>
                        </div>
                    </div>
                    <div class="content-data-div">
                        <div>
                            <button class="content-div-button1" id="data-div-button"><div class="angle">&#9650 赞同</div></button>
                            <button class="content-div-button2" id="data-div-button2"><div class="angle">&#9660 </div></button>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/评论.png" alt="" class="right-img">
                                <button class="data-lable-button">条评论</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/分享.png" alt="" class="right-img">
                                <button class="data-lable-button">分享</button>
                            </label>

                            <label for="" class="content-data-lable" id="collect">
                                <img src="/demo05/img/收藏.png" alt="" class="right-img" onClick="content(this)">
                                <button class="data-lable-button">收藏<span style="display: none;">${item.id}</span></button>
                            </label>
                             <label for="" class="content-data-lable" id="">
                                <img src="/demo05/img/喜欢.png" alt="" class="right-img" onClick = "like(this)">
                                <button class="data-lable-button">喜欢<span style="display:none;">${item.id}</span></button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/更多.png" alt="" class="right-img">
                                <button class="data-lable-button"></button>
                            </label>
                        </div>

                    </div>
                </div>

                `
                    let odiv = $(".data>div>div>div")[index]
                    // $(odiv).children("h3").text(item.title);

                    // $(odiv).children("span").text(item.content);
                    ocontentDataText.append(aaa);
                });
            }
        });
    }

    //根据推荐查询
    $("#recommend").on("click",function (){
        close();
        init();
    });

    //收藏
    function content(e){
        // console.log(e.getAttribute("src"));
        // console.log("==========>content");
        console.log($(e).next().children().text());
        if(e.getAttribute("src") === "/demo05/img/收藏.png"){
            e.setAttribute("src","/demo05/img/_收藏2.png");
            $.ajax({
                async:true,
                url:"http://localhost:8080/demo05/card?ac=modifyCard",
                type:"post",
                data:{
                    cid:$(e).next().children().text(),
                },
                dataType:"json",
            });

        }else if(e.getAttribute("src")){
            e.setAttribute("src","/demo05/img/收藏.png");
            $.ajax({
                async:true,
                url:"http://localhost:8080/demo05/card?ac=modifyCard2",
                type:"post",
                data:{
                    cid:$(e).next().children().text(),
                },
                dataType:"json",
            });
        }

    }

    //喜欢
    function like(e){
        if(e.getAttribute("src") === "/demo05/img/喜欢.png"){
            e.setAttribute("src","/demo05/img/喜欢2.png");
            $.ajax({
                async:true,
                url:"http://localhost:8080/demo05/card?ac=modifyFavor",
                type:"post",
                data:{
                    cid:$(e).next().children().text(),
                },
                dataType:"json",
            });
        }else if(e.getAttribute("src") === "/demo05/img/喜欢2.png"){
            e.setAttribute("src","/demo05/img/喜欢.png");
            $.ajax({
                async:true,
                url:"http://localhost:8080/demo05/card?ac=modifyFavor2",
                type:"post",
                data:{
                    cid:$(e).next().children().text(),
                },
                dataType:"json",
            });
        }
    }

    //主页搜素
    $("#select").on("click",function (){
        close();
        console.log("============");
        $.ajax({
            async:true,
            url:"http://localhost:8080/demo05/card?ac=selectSy",
            type:"post",
            data:{
                str: $("#selectAll").val(),
            },
            dataType:"json",
            success:function (pb){
                let ocontentDataText = $(".content-data-text");
                pb.data.forEach(function (item,index){
                    console.log(item);
                    let aaa = `
                <div class = "ajax-div">
                 <div class="wrapper">
                        <input id="exp${item.id}" class="exp" type="checkbox">
                        <div class="text">
                            <label class="btn" for="exp${item.id}"></label>
                            <h3>${item.title}</h3>
                            <span>${item.card_content}</span>
                        </div>
                    </div>
                    <div class="content-data-div">
                        <div>
                            <button class="content-div-button1" id="data-div-button"><div class="angle">&#9650 赞同</div></button>
                            <button class="content-div-button2" id="data-div-button2"><div class="angle">&#9660 </div></button>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/评论.png" alt="" class="right-img">
                                <button class="data-lable-button">条评论</button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/分享.png" alt="" class="right-img">
                                <button class="data-lable-button">分享</button>
                            </label>

                            <label for="" class="content-data-lable" id="collect">
                                <img src="/demo05/img/收藏.png" alt="" class="right-img" onClick="content(this)">
                                <button class="data-lable-button">收藏<span style="display: none;">${item.id}</span></button>
                            </label>
                             <label for="" class="content-data-lable" id="">
                                <img src="/demo05/img/喜欢.png" alt="" class="right-img" onClick = "like(this)">
                                <button class="data-lable-button">喜欢<span style="display:none;">${item.id}</span></button>
                            </label>

                            <label for="" class="content-data-lable">
                                <img src="/demo05/img/更多.png" alt="" class="right-img">
                                <button class="data-lable-button"></button>
                            </label>
                        </div>

                    </div>
                </div>

                `
                    let odiv = $(".data>div>div>div")[index]
                    // $(odiv).children("h3").text(item.title);

                    // $(odiv).children("span").text(item.content);
                    ocontentDataText.append(aaa);
                });
            }
        });
    });

</script>
</html>
